import React from "react";
import { Button, Input, message, Tag } from "antd";
import Title from "antd/es/skeleton/Title";
import { requestDispatch } from "../Api/api";
import { useDispatch } from "react-redux";
function ActiveAccount({ uid, onClose }) {
  const [phoneNumber, setPhoneNumber] = React.useState("");
  const [sms, setSms] = React.useState("");
  const dispatch = useDispatch();
  const sendSms = async () => {
    if (phoneNumber.length !== 11) {
      message.error("手机号必须为11位");
      return;
    }
    const res = await requestDispatch(
      dispatch,
      "/login/sendSms",
      { phoneNumber },
      "POST"
    );
    if (res.code >= 0) {
      message.success(res.message);
    } else {
      message.error(res.message);
    }
  };
  const activeAccount = async () => {
    if (sms.length !== 6) {
      message.error("验证码必须为6位");
      return;
    }
    const res = await requestDispatch(
      dispatch,
      "/login/activeAccount",
      { phoneNumber, sms, uId: uid },
      "POST"
    );
    if (res.code >= 0) {
      setPhoneNumber("");
      setSms("");
      onClose();
      message.success(res.message);
    } else {
      message.error(res.message);
    }
  };
  return (
    <div className="fill">
      <Title>Active Account</Title>
      <Tag color="blue">电话号码</Tag>
      <div className="form-item">
        <Input.OTP
          value={phoneNumber}
          onChange={(text) => {
            setPhoneNumber(text);
          }}
          block
          length={11}
        />
      </div>
      <Tag color="blue">验证码</Tag>
      <div className="form-item">
        <Input.OTP
          value={sms}
          onChange={(text) => {
            setSms(text);
          }}
          length={6}
        />
        <Button onClick={sendSms}>发送验证码</Button>
      </div>
      <div className="form-item">
        <Button type="primary" onClick={activeAccount} block>
          激活
        </Button>
      </div>
    </div>
  );
}

export default ActiveAccount;
